import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import Header from './component/header'
import Home from './home/index.js'
import History from './history/index.js'
import Download from './download/index'
import Ball from './ball/index.js'
import Demo from './demo/index.js'
import Streak from './streak/index.js'
import './index.css'

// ========================================
class App extends Component{
    render() {
        return (
            <div>
                <Header env='1'/>
                {/*{this.props.children}*/}
                <Route exact path="" component={Home}/>
                <Route exact path="home" component={Home}/>
                <Route exact path="history" component={History}/>
                <Route exact path="download" component={Download}/>
            </div>
        )
    }
}
// const App = ({ match }) => (
//     <div>
//         <Header env='1'/>
//         {/*{this.props.children}*/}
//         <div>{match.url}</div>
//         {/*<Route exact path={match.url} component={Home}/>*/}
//         <Route path={`${match.url}/home`} component={Home}/>
//         <Route exact path={`${match.url}/history`} component={History}/>
//         <Route exact path={`${match.url}/download`} component={Download}/>
//     </div>
// )
ReactDOM.render((
    <Router>
        <div className="route">
            <Route exact path='/' component={App}/>
            <Route exact path='/ball' component={Ball}/>
            <Route exact path='/demo' component={Demo}/>
            <Route exact path='/streak' component={Streak}/>
        </div>
    </Router>
    ),document.getElementById('root')
);
